<template>
  <div class="container">
    <van-dialog
      v-model="show"
      v-if="show"
      :title="title"
      :message="message"
      :show-cancel-button="showCancel"
      :confirm-button-text="confirmText"
      confirm-button-color="#009b63"
      :cancel-button-text="cancelText"
      cancel-button-color="#999999"
      @confirm="confirmOnPress"
      @cancel="cancelOnPress"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Dialog } from 'vant';
import { alertStore } from '../store/modules/alertStore';

@Component({
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
})
export default class Alert extends Vue {
  get show() {
    return alertStore.show;
  }
  set show(val) {
    alertStore.closeAlert();
  }
  get message() {
    return alertStore.message;
  }
  get title() {
    return alertStore.title;
  }
  get showCancel() {
    return alertStore.btns.length === 2;
  }
  get confirmText() {
    if (alertStore.btns.length > 0) {
      return alertStore.btns[0].text;
    }
    return '知道了';
  }
  get cancelText() {
    if (alertStore.btns.length === 2) {
      return alertStore.btns[1].text;
    }
    return '取消';
  }
  confirmOnPress() {
    if (alertStore.btns.length > 0) {
      alertStore.btns[0].onPress();
    }
  }
  cancelOnPress() {
    if (alertStore.btns.length === 2) {
      alertStore.btns[1].onPress();
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  /deep/.van-dialog__message {
    color: #666666;
  }
}
</style>
